<template>
  <div class="bigboxs">
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick" ref="tabs">
        <el-tab-pane label="电流" name="dianliu" ></el-tab-pane>
        <el-tab-pane label="电压" name="dianya"></el-tab-pane>
        <el-tab-pane label="功率" name="gonglv"></el-tab-pane>
        <el-tab-pane label="电度" name="diandu"></el-tab-pane>
      </el-tabs>
    </div>
      <div class="time">
        <el-date-picker
                v-model="valueri"
                size="small"
                type="datetimerange"
                range-separator=""
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
              <span><button @click="submit">查询</button></span>
    </div>
    <div class="echartt"  ref="yongdian"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { gettagquxianapi } from '@/api/analysis'
export default {
  name: 'CallPoliceHistorytrends',

  data () {
    return {
      valueri: [],
      activeName: 'dianliu',
      dianliutag: ['Ia', 'Ib', 'Ic'],
      dianyatag: ['Ua', 'Ub', 'Uc'],
      gonglvtag: ['Pa', 'Pb', 'Pc', 'P'],
      diandutag: ['CurkWhRec', 'CurkWhDel', 'CurkVarhRec', 'CurkVarhDel'],
      timearray: [],
      quuxianlist: []
    }
  },

  mounted () {
    this.gettime()
  },

  methods: {
    getmethods () {
      this.$nextTick(() => {
      // this.$refs.tabs.$emit('tab-click', { name: 'dianliu' })
        this.$refs.tabs.$el.querySelector('.el-tabs__active-bar').style.width = '30px'
      })
      this.getechartdatalist(this.activeName)
    },
    submit () {
      this.getechartdatalist(this.activeName)
    },
    handleClick (val) {
      this.getechartdatalist(val.name)
    },
    // 接口获取数据
    async getechartdatalist (val) {
      let itemtag = []
      if (val == 'dianliu') {
        itemtag = this.dianliutag
      } else if (val == 'dianya') {
        itemtag = this.dianyatag
      } else if (val == 'gonglv') {
        itemtag = this.gonglvtag
      } else if (val == 'diandu') {
        itemtag = this.diandutag
      }
      const array = []
      for (let i = 0; i < itemtag.length; i++) {
        const { data: { entity: { itemPoints } } } = await gettagquxianapi({
          deviceId: this.$store.state.monitordataobj.id,
          // deviceId:'887774',
          startTime: this.valueri[0],
          endTime: this.valueri[1],
          periodType: '10',
          itemTag: itemtag[i]
        })
        array.push(itemPoints)
      }
      this.timearray = array[0].map(ele => ele.time)
      const newArray = []
      for (let i = 0; i < array.length; i++) {
        const innerArray = array[i]
        const tempArray = []
        for (let j = 0; j < innerArray.length; j++) {
          tempArray.push(innerArray[j].value)
        }
        newArray.push(tempArray)
      }
      this.quuxianlist = newArray
      this.getecharts()
      console.log(this.quuxianlist)
    },
    // 获取当前时间戳
    gettime () {
      this.valueri = []
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() // 日
      const hours = date.getHours()
      const minutes = date.getMinutes()
      const seconds = date.getSeconds()
      this.valueri.push(year + '-' + month + '-' + day + ' ' + '00' + ':' + '00' + ':' + '00')
      this.valueri.push(year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds)
    },
    // 获取曲线图
    getecharts () {
      const chartDom = this.$refs.yongdian
      const myChart = echarts.init(chartDom)
      let option

      option = {
        backgroundColor: '#fff',
        color: [
          '#f2bd42',
          '#81b337',
          '#e21212',
          'purple'
        ],
        legend: {
          top: '1%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          //  top:'20%',
          left: '7%',
          right: '4%'
          // bottom: '10%',
          // containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              // formatter: '{value}月',
              textStyle: {
                color: '#333'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#D9D9D9'
              }
            },
            data: this.timearray
          }
        ],
        yAxis: [
          {
            min: 'dataMin',
            max: 'dataMax',
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#666'
              }
            },
            nameTextStyle: {
              color: '#666',
              fontSize: 12,
              lineHeight: 40
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#E9E9E9'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: this.activeName == 'dianliu' ? 'A相电流' : this.activeName == 'dianya' ? 'A相电压' : this.activeName == 'gonglv' ? 'A相有功功率' : this.activeName == 'diandu' ? '正向有功电度' : '',
            type: 'line',
            smooth: true,
            // showSymbol: false,/
            symbolSize: 8,
            zlevel: 3,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#fcf2d9'
                    },
                    {
                      offset: 1,
                      color: '#fcf2d9'
                    }
                  ],
                  false
                ),
                shadowColor: '#23CF9C10',
                shadowBlur: 10
              }
            },
            data: this.quuxianlist[0]
          },
          {
            name: this.activeName == 'dianliu' ? 'B相电流' : this.activeName == 'dianya' ? 'B相电压' : this.activeName == 'gonglv' ? 'B相有功功率' : this.activeName == 'diandu' ? '反向有功电度' : '',
            type: 'line',
            smooth: true,
            // showSymbol: false,
            symbolSize: 8,
            zlevel: 3,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#e6f0d7'
                    },
                    {
                      offset: 1,
                      color: '#e6f0d7'
                    }
                  ],
                  false
                ),
                shadowColor: '#578FFB10',
                shadowBlur: 10
              }
            },
            data: this.quuxianlist[1]
          },
          {
            name: this.activeName == 'dianliu' ? 'C相电流' : this.activeName == 'dianya' ? 'C相电压' : this.activeName == 'gonglv' ? 'C相有功功率' : this.activeName == 'diandu' ? '正向无功电度' : '',
            type: 'line',
            smooth: true,
            // showSymbol: false,
            symbolSize: 8,
            zlevel: 3,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#f9d0d0'
                    },
                    {
                      offset: 1,
                      color: '#f9d0d0'
                    }
                  ],
                  false
                ),
                shadowColor: '#6E40F210',
                shadowBlur: 10
              }
            },
            data: this.quuxianlist[2]
          },
          {
            name: this.activeName == 'gonglv' ? '总有功功率' : this.activeName == 'diandu' ? '反向无功电度' : '',
            type: 'line',
            smooth: true,
            // showSymbol: false,
            symbolSize: 8,
            zlevel: 3,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#d58fd0'
                    },
                    {
                      offset: 1,
                      color: '#fff'
                    }
                  ],
                  false
                ),
                shadowColor: '#FF61E610',
                shadowBlur: 10
              }
            },
            data: this.activeName == 'gonglv' || this.activeName == 'diandu' ? this.quuxianlist[3] : []
          }
        ]
      }

      option && myChart.setOption(option)
      const resizeOb = new ResizeObserver((entries) => {
        for (const entry of entries) {
          echarts.getInstanceByDom(entry.target).resize()
        }
      })
      resizeOb.observe(this.$refs.yongdian)
    }
  }
}
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.bigboxs{
  height: 100%;

  .time{
    button{
      width: 60px;
      height: 30px;
      background-color: #fff;
      border-radius: 3px;
      border: 1px solid #ccc;
      background-color: #1a90fe;
      color: #fff;
      margin-left: 30px;
    }
  }
  .echartt{
    margin-top: 20px;
    width: 100%;
    height: 90%;
}
}

</style>